<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/layer/layer.js"></script>
    <script src="../static/editor.md/examples/js/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
<div id="chartContainer" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</body>
<script type="text/javascript">
    var data;
    var postFlag = false;  // 判断ajax是否再传输数据，若在传输则直接返回，防止重复请求
    drawChart();

    // 绘图函数
    function drawChart() {
        getDataInfo(data);
        var chartDom = document.getElementById('chartContainer');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: "学生成绩分布图",
                x: 'center',
                y: '7px',
                textStyle: {
                    color: '#092750',
                    fontSize: 16
                },
                textAlign: 'left'
            },
            // 图例
            legend: {
                left: 'right',
                orient:'vertical', // 垂直放置
                padding: [0, 0, 0, 400], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
            },
            grid: [
                {x: '7%', y: '20%', width: '38%', height: '60%'},
            ],
            xAxis: {
                name: '分数段',
                type: 'category',
                data: ['0~60', '60~70', '70~80', '80~90', '90~100']
            },
            yAxis: {
                name: '人数',
                type: 'value',
            },

            tooltip: {
                trigger: 'item',
                // formatter: '{a} <br/>{b} : {c} ({d}%)'
                // 自定义图表tips返回值
                formatter: function (params) {
                    console.log(params);
                    var str = "";
                    if(params['seriesType'] === 'bar') {
                        name = params['name'];
                        value = params['value'];
                        str += "分数" + name + ": " + value + "名"
                    } else if(params['seriesType'] === 'pie') {
                        name = params['name'];
                        value = params['value'];
                        percent = params['percent'];
                        str += "分数" + name + ": " + value + "名" + "<br>" + "占比：" + percent;
                    }
                    return str;
                }
            },
            series: [
                // 条形图
                {
                    data: data,  // 传入数据
                    type: 'bar',
                    center: ['25%', '50%'],
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
                    itemStyle: {
                        color: '#144778'
                    }
                },
                // 饼图
                {
                    name: '成绩分布饼图',
                    type: 'pie',
                    radius: [20, 140],
                    center: ['75%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 5
                    },
                    // 规定各块值和名称
                    data: [
                        {value: data[0], name: '<60'},
                        {value: data[1], name: '60~70'},
                        {value: data[2], name: '70~80'},
                        {value: data[3], name: '80~90'},
                        {value: data[4], name: '90~100'},
                    ]
                }]
        };
        option && myChart.setOption(option);
    }

    // 从URL中获取参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);//返回参数值
        return null;
    }

    function getDataInfo() {
        // 从URL中获取参数
        if (postFlag) return;
        const teachClassID = getUrlParam("teachClassID");
        postFlag = true;
        $.ajax({
            type: "post",
            url: '/teachAffairManagementForTeacher/getTeachClassScoreChartDataJSON',
            data: {
                'teachClassID': teachClassID
            },
            async: false,
            traditional: true, //是否使用传统的方式浅层序列化,若有数组参数或对象参数需要设置true!!!!!!
            dataType: "json",
            success: function (returnData) {
                console.log(returnData);
                obj = returnData;
                data = obj['data'];
                console.log(data);
                drawChart(returnData);
                layer.closeAll('loading');  // 关闭加载层
                if (obj['code'] === 1) {
                    layer.msg('获取成功', {
                        icon: 6,
                        time: 1000, //1s后自动关闭
                        // btn: ['确定']
                    }, function () {
                        layer.closeAll();
                    });
                } else {
                    layer.msg('获取失败', {icon: 5});
                }
            },
            error: function () {
                layer.closeAll('loading');  // 关闭加载层
                alert("false");
            }
        });
    }
</script>
</html>